<template>
  <div class="login">
    <el-button :plain="true" style="display:none" @click="open2">成功</el-button>
    <p class="user">账号登录</p>
    <el-form
      :model="loginForm"
      status-icon
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="账号" prop="username">
        <el-input
          type="username"
          v-model="loginForm.username"
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <p class="msg">{{ msg }}</p>
      <el-form-item label="密码" prop="password">
        <el-input
          type="password"
          v-model="loginForm.password"
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')"
          >提交</el-button
        >
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
// import jwt from 'jwt-decode'
import { mapMutations } from "vuex";
export default {
  data() {
    var validateUser = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入账号"));
      } else {
        callback();
      }
    };
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        callback();
      }
    };
    return {
      msg: "", //提示文本
      loginForm: {
        username: "",
        username: "",
      },
      rules: {
        username: [{ validator: validateUser, trigger: "blur" }],
        password: [{ validator: validatePass, trigger: "blur" }],
      },
    };
  },
  methods: {
    ...mapMutations(["setUser"]),
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // var params = {
          //   params: {
          //     name: this.loginForm.username,
          //     pass: this.loginForm.password,
          //   },
          // };
          var params ={
            name: this.loginForm.username,
              pass: this.loginForm.password,
          }
          this.$api.getLogin(params).then((res) => {
            if (params) {
              //响应成功
              if (res.code === 1) {
                let obj = {
                  user: this.loginForm.username,
                  token: res.token,
                };
                this.setUser(obj);
                localStorage.setItem("user", JSON.stringify(obj));
                // 提示信息
                this.open2();
                if(localStorage.getItem('to')){
                  this.$router.push("/user");
                  return ;
                }
                // 跳转
                this.$router.push("/");
                
              } else {
                //登录失败 提示账号问题 code===-1
                this.msg = res.info;
              }
            } else {
              //服务器连接失败 提示稍后再试
              this.msg = "服务器连接失败 提示稍后再试";
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    open2() {
      this.$message({
        showClose: true,
        message: "success",
        type: "success",
      });
    },
  },
};
</script>

<style lang="less" scoped>
.msg {
  width: 200px;
  margin: 0 auto;
  // text-align: center;
  height: 30px;
  line-height: 30px;
  font-size: 14px;
  color: red;
}
.el-form-item:nth-child(1) {
  margin-bottom: 0;
}
.login {
  margin: 150px auto 0;
  width: 600px;
  height: 500px;
  .user {
    margin-bottom: 50px;
    margin-left: 70px;
    text-align: center;
    font-size: 40px;
    font-weight: 700;
  }
  /deep/.el-input__inner {
    border-radius: 20px;
  }
}
</style>>